<html>
    <head>
        <meta charset="utf-8">
        <title>sample</title>
        <!-- my style -->
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- 开场动画 -->
        <div class="image-container">
            <!-- 上图 -->
            <img src="./img/zhankaishangbu.png" class="image1" alt="" srcset="">
            <!-- 下图 -->
            <img src="./img/zhankaixiabu.png" class="image2" alt="" srcset="">
        </div>
        <!-- 教学 -->
        <div class="teach none">
            <!-- 图片显示 -->
            <div class="tech-img">
                <img class="tect-img-style" src="./new_sc/jiaocheng.png" alt="">
            </div>
            <!-- 确认按钮 -->
            <div class="tect-btn">
                <img class="tect-img-style tech-btn-img" src="./new_sc/queren.png" alt="">
            </div>
        </div>
        <!-- 整体盒子 -->
      <div class="content_box none">
        <!-- 左侧区域 -->
        <div class="box-left">
            <!-- 海洋 -->
            <div class="left-top">
                <!-- 海洋盒子 -->
                <div class="box-img">
                    <!-- 计数 -->
                    <div class="count">
                        <div class="text">0</div>
                    </div>
                    <!-- 鱼线 -->
                    <div class="yx">
    
                    </div>
                    <!-- 钓到的鱼 -->
                    <div class="upyu"></div>
                </div>
            </div>
            <!-- 工具栏 -->
            <div class="left-bottom">
                <!-- 框 -->
                <div class="bottom1">

                </div>
                <!-- 计时器 -->
                <div class="bottom2">
                    
                </div>
                <!-- 存放鱼和鱼名称 -->
                <div class="bottom3">
                    <!-- 鱼的名字 -->
                    <div class="bottom3-left"></div>
                    <!-- 存放鱼的盒子 -->
                    <div class="bottom3-right">
                        <!-- 鱼 -->
                        <div class="RIGHT-YU">

                        </div>
                    </div>
                </div>
                <!-- 音乐播放 -->
                <div class="bottom4">
                    <!-- 操作按钮图标 -->
                    <img src="./img/play.png" class="playaudio" alt="" srcset="">
                </div>
            </div>
        </div>
        <!-- 右侧区域 -->
        <div class="box-right">
            <!-- 上面显示的文字 -->
            <div class="right-top"></div>
            <!-- 存放鱼竿和右边修饰 -->
            <div class="right-bottom-left">
                <!-- 鱼竿 -->
                <div class="yg">
                </div>
            </div>
            <!-- 修饰 -->
            <div class="right-bottom">
                
                <div class="right-bottom-right">
                    <img class="el" data-num="8" src="./new_sc/red.png" alt="" srcset="">
                    <img class="el" data-num="3"  src="./new_sc/yellow.png" alt="" srcset="">
                    <img class="el" data-num="5"  src="./new_sc/green.png" alt="" srcset="">
                </div>
            </div>
        </div>
        <!-- 切换背景 -->
        <div class="box-qx-bgc">
            <img class="bg-qx"  src="./new_sc/bd.png" alt="" srcset="">
            <img class="bg-qx"  src="./new_sc/xdiwhy.png" alt="" srcset="">
            <img class="bg-qx"  src="./new_sc/rb.png" alt="" srcset="">
        </div>
      </div>
      <audio src="./audio/海浪.mp3" loop="loop"></audio>
      <audio src="./audio/上钩.mp3"></audio>
      <audio src="./audio/奖励音效.wav"></audio>
      <audio src="./audio/放线.mp3"></audio>
      <audio src="./audio/收线.mp3"></audio>
      <audio src="./audio/出水.mp3"></audio>
    <script src="js/script.js"></script>
    </body>
</html>
